import lodash from "lodash-es";
import "leaflet-canvas-custom-class";
/**
 * 船舶图标绘制
 */
class CanvasShip extends L.Canvas.CustomCanvas {
  _instance = null;

  drawLayer() {
    const {
      options: { latlngs },
      _map: map,
    } = this;

    this._ctxs = [];

    // 数据处理部分（临时代码）
    const res = latlngs.map((item) => {
      const latlng = {};
      if (!item.latlng) {
        latlng.lat = item.lat;
        latlng.lng = item.lng;
      }
      const result = {
        latlng: map.latLngToContainerPoint(latlng),
        deg: item.deg || 0,
        type: item.type,
        color: item.color,
        label: item.label,
        sourceObj: item,
      };

      result.latlng.x *= 2;
      result.latlng.y *= 2;
      return result;
    });

    this._ctxPoints = res;
    if (!Array.isArray(this._prevEvent)) this._prevEvent = [];

    this.drawLineLabel(res);
  
  }

  drawLineLabel(latlngs, point) {
    const { _ctx: ctx } = this;
    latlngs.forEach(item => {
      let { x, y } = item.latlng;
      ctx.beginPath();
      ctx.moveTo(x, y); // 起点坐标
      ctx.lineTo(x+30, y+30); // 终点坐标
      ctx.lineWidth = 2; // 线宽
      ctx.strokeStyle = 'red'; // 线条颜色
      ctx.stroke();
      ctx.font = '28px serif';// 设置字体大小
      ctx.fillText(item.label, x+30, y+35)
    })

    
  }
  
  
}
/**
 * 船位、 航线、 航迹、 时间点 Canvas 绘制
 * @param {Object} options 初始化选项
 * @param {Array} options.latlngs 经纬度数组 [{lat : 纬度, lng:经度, deg : 旋转角度 , color : 图标颜色}]
 * @param {Number | String} options.latlngs.deg 旋转角度 0-360
 * @param {String} options.latlngs.type base 基础形状 running 航行中 turn 转向 lost 信号延迟 > 6h storage 浮式存储
 * @param {Object} options.events 要注册的事件 example : {click( point , sourceObj ){ xxx }}； point 代表鼠标坐标在 图标内时的 鼠标坐标 * 2 sourceObj 选中的对象的初始对象
 * @return 创建的实例对象，将会是一个单例当重复创建时只会覆盖参数而不创建新的实例(暂未实现)
 */
export function createCanvasShipLine(options) {
  const result = new CanvasShip(options);
  return result;
}
